body {
        scrollbar-width: thin;
        scrollbar-color: white transparent;
    }  


    .bodyJournal{
        margin:0;
        height:100vh;
        display:flex;
        justify-content:center;
        background-image:url(../bg.png);
        background-size: cover;
    }

    .journalContainer{
        width:50%;
        height:103%;
        display:flex;
        flex-direction:column;
        padding-bottom:2%;
        max-height: 1080px;
    }

    .journalLogo{
        width:50%;
    }

    .journalContent{
        flex:1;
        display:flex;
        height:90%;
        border:2px dashed white;
        border-radius:6px;
        background:#0e0e0e;
    }

    .journalEntries{
        width:70%;
    }

    .journalProfile{
        display:flex;
    }

    .profilePicture{
        width:19%;
        height:19%;
        padding:3%;
        margin-top:0.5%;
        border-radius:30px;
    }

    .profileName{
        padding-top:4%;
        color:white;
        font-size:xxx-large;
        font-family: Consolas;
    }

    .latestEntry{
        padding:0 5%;
        color:white;
        font-family: Consolas;
    }

    .latestEntry p{
        font-size: larger;
    }

    .olderEntries{
        max-height:60%;
        overflow-y:auto;
        font-family: Consolas;
        width: 99%;
    }

    .olderEntries div{
        display:flex;
        justify-content:center;
    }

    .olderEntriesContainer{
        color:white;
        border-top:2px white dashed;
        width:90%;
    }

    .olderEntriesContainer p{
        display:flex;
        justify-content:space-between;
        align-items:end;
    }

    .journalSidebar{
        width:30%;
        color:white;
        border-left:2px dashed white;
    }

    .sidebarContent{
        padding:5%;
    }

    .profileInfo{
        border-bottom:2px dashed white;
        font-family: Consolas;
        padding-bottom: 3%;
    }

    .profileInfo p{
        margin: 2% 0% 5% 0%;
    }

    .backLink{
        color: white;
        font-family: 'Consolas';
        text-decoration: none;
    }

    .vibeImg{
        width: 100%;
        border-radius: 19px;
    }

    /*iPod*/

    .iPodBorders {
        position:relative; 
        padding:0px 1px 1px 1px; 
        background: black;
        border:2px solid white;      
        border-radius: 5px;
  
    }

    .iPodContainer{
        width: 96%;
        font-family: 'Consolas';
        aspect-ratio: 0.90;
    }

    .contentiPod{
        height: 100%;
        position: relative; 
        overflow: hidden;

    }

    .bgiPod{
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        z-index: 0;
        object-fit: cover;
    }

    .iPodBlackScreen{
        position: relative;
        z-index: 1;
        padding: 3%; 
        background-color: black;
        border-radius: 6px;
        height: 55%;
    }

    .iPodTitle{
        height: 15%; 
        background: linear-gradient(to bottom, #e1f0f7, #a2bbc0); 
        border: 1px grey solid; 
        display: flex; 
        justify-content: center; 
        align-items: center;
    }

    .iPodTitle p{
        color: black;
        font-size: xx-small;
    }

    .iPodWhiteScreen{
        display: flex;
        width: 100%;
        height: 82%;
        background-color: white;
    }

    .iPodContentContainer{
        width: 40%;
        height: 80%;
        margin-top: 6%;
        margin-left: 5%;
    }

    #albumCover{
        width: 35%; 
        position: absolute;
        z-index: 2; 	
        transform: rotateX(12deg) rotateY(-20deg);
    }

    #albumReflection{
        height: 50%;
        width: 35%;
        transform: scaleY(-1) rotateX(12deg) rotateY(20deg);
        opacity: 50%;
        position: absolute;top: 40%;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
    }

    .iPodTitleContainer{
        width: 45%;
        margin-right: 6%;
        margin-top: 6%;
        display: flex;
        flex-direction: column;
    }

    .iPodTitleContainer p{
        margin: 0;
        color: black;
        font-size: small;
    }

    .columniPod{
        display: flex;
        justify-content: center;
        padding-top: 8%;
        border-top: 2px white dashed;
    }

    #albumTitle{
        font-weight: bold;
        line-height: 1.2em;
        height: 3.6em;             
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #albumArtist{
        margin-top: 6px;
        font-size: x-small;
    }

    .iPodController{
        z-index: 10;
        position: absolute;
        left: 50%;
        bottom: 10%;
        transform: translate(-50%, 50%);
        width: 94%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #1b1b1b;
    }

    #iPodBack{
        position: absolute;
        top: 40%;
        left: 13%;
        transform: translate(-50%, -50%);
        width: 17%;
    }

    #iPodPlay{
        position: absolute;
        top: 12%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 25%;
    }

    #iPodForward{
        position: absolute;
        top: 40%;
        right: 13%;
        transform: translate(50%, -50%);
        width: 17%;
    }

    #iPodBack:hover, #iPodPlay:hover, #iPodForward:hover{
        cursor: pointer;
    }

    .doraemon{
        position: absolute;
        z-index: 11;
        width: 7%;
        top: 79%;
    }

    .backLinkContainer{
        text-align: center;
        padding-top: 24%;
    }